<template>
    <configCompositionTwoWindowStyle>
        <template slot="card">
            <search
                    @refresh="refreshList"
                    @search="searchByName"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :forCall="true"
                    :showAdvSearch="false"
                    :isShowInput="false"
                    :showAdd="false"
                    :isReloadIvr="false"
                    :count="count"
                    @turnPage="turnPage"
                    >
            </search>
            <div style="border-top:1px solid #d9d9d9;">
                <el-row :gutter="20" style="padding:6px 10px;margin:0;">
                    <el-col :span="12">
                        <el-select size="mini" v-model="PBX" :placeholder="$t('public.pleasePick')" style="width:100%;" @change="changePBX">
                            <el-option
                                    :label="$t('public.all')"
                                    :value="''">
                            </el-option>
                            <el-option
                                    v-for="(item,index) in pbxs"
                                    :label="item.NickName + ' (' +item.PBX + ')'"
                                    :value="item.PBX"
                                    :key="index">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="12">
                        <el-input
                                :placeholder="$t('channelsettings.process1')"
                                class="condition"
                                size="mini"
                                v-model="searchContent"
                                @keyup.enter.native="searchByName"
                                >
                          <i
                            class="el-input__icon el-icon-search"
                            slot="suffix"
                            @click="searchByName">
                          </i>
                        </el-input>
                    </el-col>
                </el-row>
            </div>
            <process-table :tableHeader="tableHeader" :tableData="tableData" @resh='queryList' @checkProcess="checkProcess"></process-table>
        </template>
        <template slot="detail">
            <breadCrumb v-show="isShowDetail" :titleArr="titleArr" @back="cancle"></breadCrumb>
            <process-detail  v-show='isShowDetail' :isWatch="isWatch" :currentData="currentData" :showBread="showBread" @resh='queryList'></process-detail>
        </template>
    </configCompositionTwoWindowStyle>
</template>
<script>
    import configCompositionTwoWindowStyle from '@/components/ui-modules/config/configCompositionTwoWindowStyle'
    import search from '../base/search'
    import ProcessTable from './ProcessTable.vue'
    import ProcessDetail from './ProcessDetail.vue'
    import breadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig.vue'
    export default {
      name: 'ProcessList',
      data () {
        return {
          count: 0,
          currentPage: 1,    //   当前页
          pageSize: 5,
          tableHeader: [
            {prop: 'DisplayName', label: this.$t('channelsettings.process2')},
            {prop: 'UpdateTime', label: this.$t('config.channel.lastUpdateTime')},
            {prop: 'PBX', label: 'PBX'},
            {prop: '', label: this.$t('sms.operate')}
          ],                        //   自定义 表头
          isShowDetail: false, //   是否要展示右边
          tableData: [],
          showBread: 'addBlackRedList',
          currentData: {},
          searchContent: '',
          pbxs: [],
          PBX: '',
          isWatch: 0,
          titleArr: [this.$t('config.channel.processManage'), this.$t('config.channel.checkProcess')]
        }
      },
      components: {
        configCompositionTwoWindowStyle,
        search,
        ProcessTable,
        ProcessDetail,
        breadCrumb
      },
      methods: {
        changePBX (pbx) {
          this.isShowDetail = false
          this.queryList(pbx, this.searchContent)
        },
        searchByName () { // 根据流程名字搜索
          this.isShowDetail = false
          this.queryList(this.PBX, this.searchContent)
        },
        cancle () {
          this.isShowDetail = false
        },
        refreshList () {
          this.searchContent = ''
          this.PBX = ''
          this.queryList()
        },
        queryList (pbx, searchVal) { // 获取列表或者是刷新列表
          let data = {}
          data.Account = this.$store.state.session.account.account
          if (pbx) {
            data.PBX = pbx
          }
          if (searchVal) {
            data.DisplayName = searchVal
          }
          data.page = this.currentPage
          data.limit = 5
          this.isShowDetail = false
          this.$store.dispatch('queryIvrProcessList', data).then(resp => {
            if (resp && resp.success) {
              this.tableData = resp.list
              this.count = resp.count
            } else {
              this.$message.error(this.$t('channelsettings.process3'))
            }
          })
        },
        turnPage (val) {
          this.currentPage = val
          this.queryList(this.PBX, this.searchContent)
        },
        checkProcess (val) { // 编辑黑红名单
          this.showBread = 'checkProcess'
          this.currentData = val
//          let data = {id: val._id}
//          this.$store.dispatch('queryIvrProcessById', data).then(resp => {
//            if (resp.success) {
//              this.currentData = resp.data
//            } else {
//              this.$message.error('查看流程失败！')
//            }
//          })
          let data = {}
          let account = this.$store.state.session.account
          data.Account = account.account
          if (!this.$store.state.session.ivrMap || (this.$store.state.session.ivrMap && !this.$store.state.session.ivrMap[val.PBX])) { // 在vuex中找不到相对应的值
            data.PBX = val.PBX
            this.$store.dispatch('getAllNodesByPbxForSkill', data).then(res => {
              this.isShowDetail = true
              this.isWatch = Math.random()
            })
          } else { // 能找到相对于的pbx则不请求
            this.isShowDetail = true
            this.isWatch = Math.random()
          }
        }
      },
      beforeMount () {
        this.queryList()
        this.pbxs = this.$store.state.session.account.pbx
      }
    }
</script>
<style lang="stylus" scoped>
    @import "../../../../../assets/common.styl"
</style>
